<template>
  <div class="dd">
    <el-container>
      <el-aside width="200px">
        <h1>同城旅行管理</h1>
          <el-menu
              active-text-color="#ffd04b"
              background-color="#089DAD"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
              @open="handleOpen"
              @close="handleClose" router>
            <el-menu-item index="/shou">
              <el-icon><HomeFilled/></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-sub-menu :index="item.path" v-for="item in fu" :key="item.name">
              <template #title >
                <el-icon><Edit/></el-icon>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item
                  v-for="items in item.zi"
                  :key="items.path"
                  :index="items.path">
                {{items.name}}
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/order">
              <el-icon><Tickets/></el-icon>
              <span>订单管理</span>
            </el-menu-item>
            <el-menu-item index="/user">
              <el-icon><UserFilled/></el-icon>
              <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="/manager">
              <el-icon> <Avatar/></el-icon>
              <span>管理员管理</span>
            </el-menu-item>
            <el-menu-item index="/hotel1">
              <el-icon><School/></el-icon>
              <span>酒店管理</span>
            </el-menu-item>
          </el-menu>
      </el-aside>
      <el-container class="right">
        <el-header>
          <div class="d1">
            <span class="ss">你好：{{name}}</span>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <el-avatar :size="size" :src="headUrl" />
                <el-icon class="el-icon--right"><caret-bottom /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item class="clearfix">
                    <router-link to="/shou" style="text-decoration: none;color:#4b4b4b ">返回首页</router-link>
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" @click="open()">
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main><router-view/></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {Avatar} from '@element-plus/icons-vue'
import {ref} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router/index.js";
const fu=ref([
  {
    name:"出行管理",
    zi:[
      {
        name:'机票管理',
        path:"/aircraft",
      },
      {
        name:'船票管理',
        path:"/ship",
      },
    ],
    path: "/travel",
    icon:"<Plus/>"
  },
  {
    name:"热门推荐",
    zi:[
      {
        name: "景点推荐",
        path:"/landscape"
      },
      {
        name:"酒店推荐",
        path:"/hotel2"
      }
    ],
    path:"/recommend",
    icon:"Connection"
  }
  ])
const open=()=> {
  ElMessageBox.confirm(
      '是否退出登录',
      '消息提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {//退出登录
        ElMessage({
          type: 'success',
          message: '退出登录成功',
        })
        router.push("/")

      })
      .catch(() => {//取消
        ElMessage({
          type: 'info',
          message: '已取消退出登录',
        })
      })
}
const name=localStorage.getItem("manager")
const headUrl=localStorage.getItem("headUrl")


</script>

<style scoped>
.el-container {
  width: 100%;
  height: 100%;
}
.el-aside{
  height: 100%;
}
.dd{
  height: 100%;
  width: 100%;
  background-color: #089DAD;
}
.el-menu{
  border-right: none;
}
.right{
  background-color: #ECF5F7;
  border-radius: 30px 0 0 30px;
}
h1{
  text-align: center;
  color:#fff ;
  font-size: 23px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.d1{
  width: 100%;
  height: 60px;
  background-color: white;
  border-radius: 20px;
  margin-top: 20px;
  margin-bottom: 10px;
}
img{
  display: inline-block;
  width:45px;
  height:45px;
  border-radius: 50%;
}
.ss{
  display: inline-block;
  margin-top: 17px;
  margin-left: 15px;
}
.el-dropdown{
  position: absolute;
  right: 50px;
  top: 26px;
}
</style>